{% extends "base.html" %}

{% block title %}数据搜索 - 惠农平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-search me-2"></i>农产品数据搜索</h3>
            </div>
            <div class="card-body">
                <!-- 搜索表单 -->
                <form id="searchForm" class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label for="prodCat" class="form-label">产品分类</label>
                        <select class="form-select" id="prodCat" name="prodCat">
                            <option value="">全部分类</option>
                            {% for category in categories %}
                            <option value="{{ category }}">{{ category }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="prodName" class="form-label">产品名称</label>
                        <input type="text" class="form-control" id="prodName" name="prodName" placeholder="请输入产品名称">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2" id="searchBtn">
                            <i class="fas fa-search me-1"></i>搜索
                        </button>
                        <button type="button" class="btn btn-success" id="exportBtn">
                            <i class="fas fa-download me-1"></i>导出Excel
                        </button>
                    </div>
                </form>

                <!-- 数据表格 -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="dataTable">
                        <thead>
                            <tr>
                                <th>产品分类</th>
                                <th>产品子分类</th>
                                <th>产品名称</th>
                                <th>最低价格</th>
                                <th>平均价格</th>
                                <th>最高价格</th>
                                <th>规格信息</th>
                                <th>产地</th>
                                <th>单位信息</th>
                                <th>发布日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <nav aria-label="数据分页">
                    <ul class="pagination justify-content-center" id="pagination">
                        <!-- 分页将通过JavaScript动态生成 -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
{% endblock %} 